﻿@page "/blog"

<Seo Canonical="/blog" Title="Blazorise Blog" Description="Blazorise blogs for .NET development, cross-platform, mobile apps, Blazorise UI controls, news and more." ImageUrl="@BlogEntries.FirstOrDefault( x => x.Pinned )?.Image" />

<BlogPageTitle>
    Blazorise Blog
</BlogPageTitle>

<Row>
    <Column ColumnSize="ColumnSize.Is8.OnDesktop">
        <BlogCategorySelect Categories="@BlogEntries.Select( x => x.Category ).Distinct()" @bind-SelectedCategory="@selectedCategory" />
    </Column>
    <Column ColumnSize="ColumnSize.Is4.OnDesktop" Margin="Margin.Is3.FromBottom">
        <TextEdit Placeholder="Search..." @bind-Text="@search" />
    </Column>
</Row>

@if ( !IsCustomSearch )
{
    <Row>
        <Column ColumnSize="ColumnSize.Is8.OnDesktop">
            @{
                var pinnedBlog = BlogEntries.FirstOrDefault( x => x.Pinned );

                if ( pinnedBlog != null )
                {
                    <Card Margin="Margin.Is4.FromBottom" Shadow="Shadow.Default" Border="Border.Is0">
                        <CardImage Source="@pinnedBlog.Image" Alt="Blog post image"></CardImage>
                        <CardBody Padding="Padding.Is0.FromBottom">
                            <CardTitle>
                                @if ( pinnedBlog.Url != null )
                                {
                                    <Blazorise.Link To="@pinnedBlog.Url" Stretched>
                                        @pinnedBlog.Text
                                    </Blazorise.Link>
                                }
                            </CardTitle>
                        </CardBody>
                        <CardBody Padding="Padding.Is0.OnY">
                            <BlogPagePostInto UserName="@pinnedBlog.AuthorName" ImageName="@pinnedBlog.AuthorImage" PostedOn="@pinnedBlog.PostedOn" Read="@pinnedBlog.ReadTime" />
                        </CardBody>
                    </Card>
                }
            }
        </Column>
        <Column ColumnSize="ColumnSize.Is4.OnDesktop">
            <NewsletterWidget />

            <LatestBlogEntries BlogEntries="@BlogEntries" />
        </Column>
    </Row>
}

<BlogPageEntries Year="2022">
    @foreach ( var item in BlogEntries.Where( x => ( ( selectedCategory == "All" || !string.IsNullOrEmpty( search ) ) || x.Category == selectedCategory ) && x.Text.Contains( search ?? string.Empty, StringComparison.InvariantCultureIgnoreCase ) ) )
    {
        <BlogPageEntriesItem @key="@item" To="@item.Url" ToText="@item.Text" ImageSource="@item.Image" AuthorName="@item.AuthorName" AuthorImage="@item.AuthorImage" PostedOn="@item.PostedOn" ReadTime="@item.ReadTime" />
    }
</BlogPageEntries>

@code {
    bool IsCustomSearch => selectedCategory != "All" || !string.IsNullOrEmpty( search );

    string search = "";
    string selectedCategory = "All";

    List<BlogEntry> BlogEntries = new List<BlogEntry>
    {
        new BlogEntry { Category = "How To Guides", Url = "blog/how-to-create-social-media-share-buttons", Text = "How to create social media share buttons with Blazorise", Image = "img/blog/2024-05-17/how-to-create-social-media-share-buttons.png", AuthorName="Giorgi", AuthorImage="giorgi", PostedOn="June 12th, 2024", ReadTime="5 min" },
        new BlogEntry { Category = "How To Guides", Url = "blog/how-to-implement-validation-with-captcha", Text = "How to implement validation with captcha", Image = "img/blog/2024-05-08/how-to-implement-validation-with-captcha.png", AuthorName="David Moreira", AuthorImage="david", PostedOn="May 8th, 2024", ReadTime="5 min", Pinned = true },
        new BlogEntry { Category = "How To Guides", Url = "blog/how-to-override-fluent-design-tokens", Text = "How to override Fluent design tokens", Image = "img/blog/2024-03-26/how-to-override-fluent-design-tokens.png", AuthorName="Mladen Macanović", AuthorImage="mladen", PostedOn="March 26th, 2024", ReadTime="5 min" },
        new BlogEntry { Category = "How To Guides", Url = "blog/how-to-handle-localization-in-blazorise-validation", Text = "How to handle Localization in Blazorise Validation", Image = "img/blog/2023-09-15/how_to_handle_localization_in_blazorise_validation.png", AuthorName="David Moreira", AuthorImage="david", PostedOn="September 15th, 2023", ReadTime="5 min" },
        new BlogEntry { Category = "How To Guides", Url = "blog/how-to-enhance-the-new-datagrid-menu-filter", Text = "How to enhance the new DataGrid Menu Filter", Image = "img/blog/2023-09-08/how_to_enhance_the_new_dataGrid_menu_filter.png", AuthorName="David Moreira", AuthorImage="david", PostedOn="September 8th, 2023", ReadTime="5 min" },
        new BlogEntry { Category = "Community", Url = "blog/the-importance-of-javascript-in-blazorise", Text = "The Importance of JavaScript in Blazorise", Image = "/img/blog/2023-07-04/the-importance-of-javascript-in-blazorise.png", AuthorName = "Toni Sokolov", AuthorImage = "tonis", PostedOn = "July 4th, 2023", ReadTime = "5 min" },
        new BlogEntry { Category = "Community", Url = "blog/what-is-blazorise-all-about", Text = "What is Blazorise all About", Image = "/img/blog/2023-04-12/what-is-blazorise-all-about.png", AuthorName = "Tihana Jukić", AuthorImage = "tihana", PostedOn = "April 14th, 2023", ReadTime = "8 min" },
        new BlogEntry { Category = "Community", Url = "blog/2022-blazorise-goals", Text = "2022 Blazorise Goals", Image = "/img/blog/2023-03-03/2022-blazorise-goals.png", AuthorName = "Tihana Jukić", AuthorImage = "tihana", PostedOn = "March 3rd, 2023", ReadTime = "9 min" },
        new BlogEntry { Category = "Community", Url = "blog/introducing-the-blazorise-mvc-award-program", Text = "Introducing The Blazorise MVC Award Program", Image = "/img/blog/2022-12-05/introducing-the-blazorise-mvc-award-program.png", AuthorName = "Tihana Jukić", AuthorImage = "tihana", PostedOn = "December 5th, 2022", ReadTime = "4 min" },
        new BlogEntry { Category = "Blazor", Url = "blog/create-a-blazor-application", Text = "How To Create A Blazor Application", Image = "/img/blog/2022-09-19/create-new-blazor-app.png", AuthorName = "James Amattey", AuthorImage = "james", PostedOn = "September 19th, 2022", ReadTime = "3 min" },
        new BlogEntry { Category = "Community", Url = "blog/async-await-what-happens-under-the-hood", Text = "Async/Await — What Happens Under The Hood", Image = "img/blog/2022-09-08/AsyncAwait_What_Happens_Under_The_Hood.png", AuthorName = "Andre Santarosa", AuthorImage = "andresantarosa", PostedOn = "September 8th, 2022", ReadTime = "13 min" },
        new BlogEntry { Category = "Blazor", Url = "blog/practical-css-tips-for-developers", Text = "Practical CSS Tips For Developers", Image = "img/blog/2022-08-31/css.png", AuthorName = "James Amattey", AuthorImage = "james", PostedOn = "August 31st, 2022", ReadTime = "3 min" },
        new BlogEntry { Category = "Blazor", Url = "blog/what-to-expect-in-net7", Text = "What To Expect In .NET 7", Image = "img/blog/2022-08-29/NET7.png", AuthorName = "James Amattey", AuthorImage = "james", PostedOn="August 29th, 2022", ReadTime = "5 min" },
        new BlogEntry { Category = "Community", Url = "blog/reactive-ui-blazorise-fluent-validation", Text = "ReactiveUI, Blazorise & FluentValidation?", Image = "img/blog/2022-08-19/ReactiveUI_Blazorise_FluentValidation.png", AuthorName = "Rich Bryant", AuthorImage = "richbryant", PostedOn = "August 19th, 2022", ReadTime = "5 min" },
        new BlogEntry { Category = "How To Guides", Url = "blog/create-a-tabbed-login-form-with-blazorise-components", Text = "Guide: Create A Tabbed Login and Register Page With Blazorise", Image = "img/blog/2022-08-12/Create_A_Tabbed_Login_and_Register_Page_In_5_Minutes_In_Blazor_With_Blazorise_Components.png", AuthorName = "James Amattey", AuthorImage = "james", PostedOn = "August 12th, 2022", ReadTime = "5 min"},
        new BlogEntry { Category = "Blazor", Url = "blog/a-beginners-guide-to-maui", Text = "A Beginner's Guide To .NET MAUI", Image = "img/blog/2022-07-27/A_Beginners_Guide_To_NET_MAUI.png", AuthorName = "James Amattey", AuthorImage = "james", PostedOn="July 27th, 2022", ReadTime="4 min" },
        new BlogEntry { Category = "Blazor", Url = "blog/what-is-blazor-wasm", Text = "What Is Blazor WASM?", Image = "img/blog/2022-07-20/What_Is_Blazor_WASM.png", AuthorName = "James Amattey", AuthorImage = "james", PostedOn = "July 20th, 2022", ReadTime = "5 min" },
        new BlogEntry { Category = "Blazor", Url = "blog/exploring-webassembly-the-underlying-technology-behind-blazor-wasm", Text = "Exploring WebAssembly, The Underlying Technology Behind Blazor WASM", Image = "img/blog/2022-07-12/the_underlying_technology_behind_blazor_wasm.png", AuthorName="James Amattey", AuthorImage="james", PostedOn="July 13th, 2022", ReadTime="4 min" },
        new BlogEntry { Category = "How To Guides", Url = "blog/how-to-handle-select-with-primitive-and-complex-types", Text = "How to bind primitive and complex types with Blazorise Select component", Image = "img/blog/2022-06-25/Blazorise-Select-Component.png", AuthorName="David Moreira", AuthorImage="david", PostedOn="July 1st, 2022", ReadTime="4 min" },
        new BlogEntry { Category = "How To Guides", Url = "blog/blazor-form-validation-with-data-annotations", Text = "Blazorise Form Validation With Data Annotations: A Beginner's Guide", Image = "img/blog/2022-06-09/Blazorise-Form-Validation-With-Data-Annotations.png", AuthorName="Mladen Macanović", AuthorImage="mladen", PostedOn="June 9th, 2022", ReadTime="5 min"  },
        new BlogEntry { Category = "How To Guides", Url = "blog/how-to-create-a-blazorise-application-beginners-guide", Text = "How to create a Blazorise WASM application: A Beginner's Guide", Image = "img/blog/2022-06-08/How_to_create_a_Blazorise_application_A_Beginners_Guide.png", AuthorName="Mladen Macanović", AuthorImage="mladen", PostedOn="June 8th, 2022", ReadTime="5 min" }
    };
}